import { FC, useEffect, useState } from "react"
import { IRouteComponentProps, useDispatch, useSelector } from "umi"
import { Form, Input, Button, Card, Pagination, Drawer, message, Popconfirm } from 'antd';
import style from "./poster.less"
import { IPosterItem } from "../utils/poster"
import moment from "moment"

const { Meta } = Card;
const poster: React.FC<IRouteComponentProps> = () => {
    const state = useSelector(state => state.poster)
    const [name, setName] = useState("")
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch({
            type: "poster/getPoster",
            payload:name
        })
    }, [])
    useEffect(() => {
        dispatch({
            type: "poster/getPoster",
            payload:name
        })
    }, [name])
    
    const [item, setItem] = useState({} as IPosterItem)
    const [id, setId] = useState("")
  
   function remote(){
    dispatch({
        type: "poster/deletePoster",
        payload:id
    })
    message.warning("访客无权进行该操作")
    }
    const onFinish = (values: any) => {
        console.log('Success:', values);
        setName(values.name)
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    function onShowSizeChange(current: number, pageSize: number) {
        console.log(current, pageSize);
    }

    const [visible, setVisible] = useState(false);
    const showDrawer = (id: string) => {
        setVisible(true);
        setId(id)
        let item = state.poster.find((item: IPosterItem) => item.id == id)
        //    console.log(obj)
        setItem(item)
    };
    const onClose = () => {
        setVisible(false);
    };
    return <div>
        <div style={{ marginBottom: "24px" }}>
            <div data-show="true" className={style.warning} role="alert">
                <div className={style.alert}>
                    <div><span>系统检测到<strong>阿里云OSS配置</strong>未完善，<a href="/setting?type=OSS%20%E8%AE%BE%E7%BD%AE">点我立即完善</a></span>
                    </div>
                    <div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                className={style.form}
            >
                <Form.Item
                    className={style.ipt}
                    label="文件名称"
                    name="name"
                >
                    <Input />
                </Form.Item>
                <Form.Item  wrapperCol={{ offset: 8, span: 16 }}>
                    <div className={style.btns}>
                    <Button type="default" htmlType="reset"> 重置 </Button>
                    <Button type="primary" htmlType="submit">搜索  </Button>
                    </div>
                  
                </Form.Item>
            </Form>
            <div className={style.content}>
                <div className={style.list}>
                    {
                        state.poster.map((item: IPosterItem) => {
                            return <div className={style.item} key={item.id} onClick={() => showDrawer(item.id)}>
                                <Card
                                    hoverable
                                    style={{ width: 240, paddingLeft: 4, paddingRight: 4 }}
                                    cover={<img alt={item.name} src={item.imgUrl} />}
                                >
                                    <Meta title={item.name} description={`上传于${moment(item.createAt).format("yyyy-MM-DD HH:MM:SS")}`} />
                                </Card>
                            </div>
                        })
                    }
                </div>
                <div className={style.page}>
                    <div>

                        <span>共{state.poster.length}条</span> <Pagination
                            showSizeChanger
                            onShowSizeChange={onShowSizeChange}
                            defaultCurrent={3}
                            total={state.poster.length}
                        />
                    </div>
                </div>
            </div>
        </div>
  

        <Drawer
            title="文件信息"
            placement="right"
            closable={false}
            onClose={onClose}
            visible={visible}
            closeIcon
            width={600}

        >
            <div className={style.maskImg}><img src={item.imgUrl} alt={item.name} /></div>
            <Form>
                <Form.Item label="文件名称">
                    {item.name}
                </Form.Item>
                <div style={{ display: "flex" }}><Form.Item label="制作页面">
                    <span>{item.pageUrl}</span>
                </Form.Item>
                    <Form.Item label="文件大小" style={{ marginLeft: "10px" }}>
                        <span>{(item.size / 1024).toFixed(2)}KB</span>
                    </Form.Item>
                </div>
                <Form.Item label="访问链接">
                    <textarea style={{ padding: "10px" }} cols={70} rows={4} value={item.imgUrl} onChange={(e) => { console.log(e.target) }}></textarea>
                </Form.Item>
                <span style={{ color: "#0188fb", marginLeft: "60px" }} onClick={() => { message.success('内容已复制到剪切板'); }}>复制</span>
                <Form.Item >
                    <div className={style.maskBtn}>
                        <Button type="default" onClick={onClose}>关闭</Button>
                        <Popconfirm title="确认删除这个文件？" okText="确定" cancelText="取消" onConfirm={remote}>
                        <Button danger>删除</Button>
                        </Popconfirm>
                       
                    </div>
                </Form.Item>
            </Form>

        </Drawer>
    </div>
}
export default poster
